<!DOCTYPE html>
<html>
<head>
	<!-- ///////////////////////////////////////////////////////////////// -->
	<!-- ////////////////////////   官方样式候使用的页面    //////////////// -->
	<!-- ///////////////////////////////////////////////////////////////// -->	
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

	<link href="./logview.css" type="text/css" rel="stylesheet">
	<link href="./bulma.min.css" type="text/css" rel="stylesheet">

	<script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="./logview.js" type="text/javascript"></script>
	<script src="./html2canvas.min.js" type="text/javascript"></script>


	<style type="text/css">	
		table {
			margin-left: 15px;
		}			
			
	</style>
</head>

<body>

<div class="navbar has-shadow">
  <div class="container">
    <div class="navbar-menu">
      <div class="navbar-start">
        <div class="navbar-item">
          <div class="field is-grouped">
            <div class="control has-icons-right">
              <input id="traceIdInput" type="text" class="input" style="width: 25rem;" placeholder="请输入一个traceId...">
            </div>
            <div class="control">
              <button id="formatBtn" class="button is-info">获取</button> 	
            </div>
          </div>
        </div>
        <div class="navbar-item">
          <div class="field is-grouped" style="align-items: center;">
		    <label class="label is-centered" style="margin-right:15px; ">图表展示:</label>
<!--

           <span style="margin-left:15px; margin-top:5px;" class="is-info"> 图表展示: </span> 
-->
		   <div class="select is-info">
			   <select id="waterfall" >
					<option value ="true">true</option>
					<option value ="saab">false</option>
				</select>
		   </div>

	
          </div>
        </div>

      
      </div>
        <div class="navbar-end" style="align-items: center;">
        	 <div class="control" >
				<a class="button is-info" onclick="downloadAsImage(this)" href="#" >导出为图片</a>        	        	
	        	<a class="button is-info" onclick="downloadCurrentPage(this)" href="#" style="margin-right: 120px; margin-left:30px;">下载当前页面</a>        		
        	</div>
        </div>             
    </div>
  </div>
</div>


<br/>

<div id="detail"></div>





	<script type="text/javascript">
		// 下载当前HTML页面
		function downloadCurrentPage(aHtml){
			aHtml.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML);
			aHtml.download = "cat-" + $("#traceIdInput").val() + ".html";
		}
		
		function downloadAsImage(aHtml){
			/*	*/	
			// http://html2canvas.hertzen.com/  官网
			html2canvas(document.querySelector("html")).then(canvas => {
			    //document.body.appendChild(canvas)
				var pageData = canvas.toDataURL('image/jpeg', 1.0);
				console.log(pageData)
				//window.location=(pageData.replace("image/jpeg", "image/octet-stream"));
				saveFile(pageData.replace("image/jpeg", "image/octet-stream"),$("#traceIdInput").val() + new Date().getTime()+".jpeg");			    
			});
			
			
			/**
	         * 在本地进行文件保存
	         * @param  {String} data     要保存到本地的图片数据
	         * @param  {String} filename 文件名
	         */
	        var saveFile = function(data, filename){
	            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
	            save_link.href = data;
	            save_link.download = filename;
				debugger
	            var event = document.createEvent('MouseEvents');
	            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	            save_link.dispatchEvent(event);
	        };			
			
			html2canvas(document.body, {
				onrendered: function (canvas) {                         
					
				}
			})		
		}		
	
		$(document).ready( function() {
			
			$("#formatBtn").click(function() {
				if($("#traceIdInput").val().length <= 0){
					alert("错误, 请输入traceId");
					return;
				}
				
				// 抓取数据
				var allText = "";
			    $.ajax({
			        type: "get",
			        url: "./catLog",
			        //dataType: "text",
			        cache: false,
			        async: false,
			        data: {"traceId": $("#traceIdInput").val(), "waterfall": $("#waterfall").val()},
			        success: function (data, status, jqXHR) {
			           allText= data;
			        },
			        error: function (request, status, ex) {
	                   console.error(status + ";" + ex);
	                   alert("错误, 请查看控制台!");
			        }
			    });
				
				debugger
			    if(allText.length <= 0){
			    	alert("错误, 未查询到数据!");
			    	return;
			    }
							
				// 转码, 以便正常展示我们想要的界面效果 
				//	高版本浏览器才支持replaceAll 方法
				//allText = allText.replaceAll("&lt;","<").replaceAll("&gt;",">");				
				
				allText = escapeHtml(allText);				
				
				// table全景显示
				allText = "<div class='table-container'>" + allText + "</div>"
			
				$("#detail").html(allText);
				
				$("table").addClass("table is-bordered is-striped is-fullwidth");
			});
			
			function escapeHtml(allText){
				var re = new RegExp("&lt;","g");
				allText = allText.replace(re,"<");
				re = new RegExp("&gt;","g");
				allText = allText.replace(re,">");	
				return allText;
			}

			// ====================================
			QueryString = { 
				    data: {}, 
				    Initial: function() { 
				        var aPairs, aTmp; 
				        var queryString = new String(window.location.search); 
				        queryString = queryString.substr(1, queryString.length); //remove   "?"    
				        aPairs = queryString.split("&"); 
				        for (var i = 0; i < aPairs.length; i++) { 
				            aTmp = aPairs[i].split("="); 
				            this.data[aTmp[0]] = aTmp[1]; 
				        } 
				    }, 
				    GetValue: function(key) { 
				        return this.data[key]; 
				    } 
			};
			
			QueryString.Initial();
			
			$("#traceIdInput").val(QueryString.GetValue('traceId'));
			$("#waterfall").val(QueryString.GetValue('waterfall') || true);
			if($("#traceIdInput").val()){
				$("#formatBtn").trigger("click");
			}				
 
		});
	</script>
</body>
</html>
